<template>
  <a-modal
    @cancel="modalClose"
    :visible="visible"
    layout="horizontal"
    width="800px"
    wrapClassName="timetable-modal"
    :footer="null"
    :destroyOnClose="true"
  >
    <YxpCalendar
      @choseDay="choseDay"
      @changeMonth="changeMonth"
      :markDateMore="markDateMore"
    ></YxpCalendar>
    <div v-if="todayCourse.length" class="today-course">
      <div v-for="item in todayCourse" class="course-item">
        <div>
          <span>{{ item.date }}</span>
          <span>{{ item.s_time + "~" + item.e_time }}</span>
          <span class="course_type">{{ item.course_type }}</span>
          <span>{{ item.classesinfo }}</span>
        </div>
        <div class="courseInterval">
          <template
            v-if="
              enterStatus({
                timecountdown: item.timecountdown,
                s_time: item.s_time,
                e_time: item.e_time,
                pre_in_class: item.config? item.config.pre_in_class : 0,
                after_in_class: item.config? item.config.after_in_class : 0
              }) === -1
            "
          >
            <span class="is__over">已结束</span>
          </template>
          <template
            v-else-if="
              enterStatus({
                timecountdown: item.timecountdown,
                s_time: item.s_time,
                e_time: item.e_time,
                pre_in_class: item.config? item.config.pre_in_class : 0,
                after_in_class: item.config? item.config.after_in_class : 0
              }) === 2
            "
          >
            <span class="is_notstart">未开课</span>
          </template>
          <template
            v-else-if="
              enterStatus({
                timecountdown: item.timecountdown,
                s_time: item.s_time,
                e_time: item.e_time,
                pre_in_class: item.config? item.config.pre_in_class : 0,
                after_in_class: item.config? item.config.after_in_class : 0
              }) === 1
            "
          >
            <span>未开课</span>
          </template>
          <template
            v-else-if="
              enterStatus({
                timecountdown: item.timecountdown,
                s_time: item.s_time,
                e_time: item.e_time,
                pre_in_class: item.config? item.config.pre_in_class : 0,
                after_in_class: item.config? item.config.after_in_class : 0
              }) === 0
            "
          >
            <a-button
              size="small"
              type="primary"
              shape="round"
              @click="enterRoom(item)"
              >进入课堂</a-button
            >
          </template>
          <template
            v-else-if="
              enterStatus({
                timecountdown: item.timecountdown,
                s_time: item.s_time,
                e_time: item.e_time,
                pre_in_class: item.config? item.config.pre_in_class : 0,
                after_in_class: item.config? item.config.after_in_class : 0
              }) === 3
            "
          >
            <a-button
              disabled
              size="small"
              type="primary"
              shape="round"
              >已过进入时间</a-button
            >
          </template>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { Modal } from "ant-design-vue";
import YxpCalendar from "@/components/common/YxpCalendar/index.vue";
import { enterStatus } from "@/utils/format-tools";
import _ from "lodash";
import moment from "moment";
export default {
  name: "timetableModal",
  components: {
    AModal: Modal,
    YxpCalendar
  },
  data() {
    return {
      todayCourse: []
    };
  },
  props: ["markDateMore", "visible"],
  computed: {},
  watch: {
    markDateMore(val) {
      let curr = val.filter(v => {
        v.date === moment().format("YYYY-MM-DD");
      });
      if (curr.length) {
        this.todayCourse = curr[0].course
      }
    }
  },
  methods: {
    modalClose() {
      this.$emit("update:visible", false);
    },
    choseDay(item) {
      this.todayCourse = item.course || [];
    },
    changeMonth(date) {
      console.log(date, '================')
      let currDate = date.split('/').slice(0, 2).join('-')
      this.$emit('fetchData', currDate)
      this.todayCourse = []

    },
    enterStatus,
    enterRoom(data) {
      this.$emit("enterRoom", data);
    }
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {}
};
</script>
<style lang="less">
.timetable-modal {
  .ant-modal-content {
    .ant-modal-body {
      padding: 20px 40px 40px;
    }
  }
  .today-course {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    .course-item {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      font-size: 16px;

      .course_type {
        display: inline-block;
        font-size: 12px;
        padding: 2px 6px;
        border-radius: 4px;
        border: 1px solid @primary-color;
        color: @primary-color;
      }
      & > div > span {
        margin-right: 10px;
      }
      .is__over {
        color: #BCBCBC;
      }
      .is_notstart {
        color: @primary-color;
      }
    }
  }
}
</style>
